<template>
	<view>
		<view v-if="type == 0" class="pt-10 rows rowsw">
			<image class="w-165 h-165" mode="aspectFill" :src="upUrl" @tap="lookImage()"></image>
			<view v-for="(item,index) in onImages" :key="index" class="ml-5 mr-5 relative">
				<image class="w-165 h-165" mode="aspectFill" :src="item" :key="index"></image>
				<image @tap="detImg(index)" :src="delUrl" class="w-30 h-30 absolute"
					style="right: -10rpx;top: -10rpx;"></image>
			</view>
		</view>
		<view v-else class="pt-10 rows rowsw">
			<image v-if="!onImage" class="w-165 h-165" mode="aspectFill" :src="upUrl" @tap="lookImage()"></image>
			<view v-else class="relative">
				<image class="w-165 h-165" mode="aspectFill" :src="onImage"></image>
				<image @tap="detImg(index)" :src="delUrl" class="w-30 h-30 absolute"
					style="right: -10rpx;top: -10rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "upLoad",
		data() {
			return {
				onImages: [],
				saveImages: [],
				onImage: '',
				saveImage: '',
			};
		},
		/*	
			@param {Boolean} isMust: true [是否必填]
		  	@param {Number} type: 0/1 默认：1 [多选/单选] 
			@param {String} upUrl: /static/icon_19_tp.png [上传图片URL]
			@param {String} delUrl: /static/detIcon.png [删除图片的URL]
			@param {Number} max: 0
		*/
	   watch: {
			"images"() {
				this.saveImages = [...this.images]
				this.images.forEach((val,ind) => this.images[ind] = this.URL + val)
				this.onImages = [...this.images]
			},
			"image"() {
				this.saveImage = this.image
				this.onImage = this.image
			}
	   },
		props: {
			type: {
				type: Number,
				default: 1
			},
			upUrl: {
				type: String,
				default: 'tianjiatupiab.png'
			},
			delUrl: {
				type: String,
				default: '/static/detIcon.png'
			},
			max: {
				type: Number,
				default: 0
			},
			isMust: {
				type: Boolean,
				default: true
			},
			images: {type: Array},
			image: {type: String},
		},
		methods: {
			getImage() {
				let obj = {}
				if (this.Must) {
					if (this.type == 0) {
						if (this.onImages[0]) {
							obj.image = this.onImages
							obj.saveImage = this.saveImages
						} else this.showtt('图片不可为空')
					} else {
						if (this.onImage) {
							obj.image = this.onImage
							obj.saveImage = this.saveImage
						} else this.showtt('图片不可为空')
					}
				} else {
					if (this.type == 0) {
						obj.image = this.onImages
						obj.saveImage = this.saveImages
					} else {
						obj.image = this.onImage
						obj.saveImage = this.saveImage
					}
				}
				return obj
			},
			detImg(index) { //删除图片
				if (this.type == 1) {
					this.onImage = ''
					this.saveImage = ''
				} else {
					this.saveImages.splice(index, 1)
					this.onImages.splice(index, 1)
				}

			},
			lookImage() { //选择图片
				let that = this
				uni.chooseImage({
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					count: 1,
					success(res) {
						if (that.max != 0) {
							res.tempFilePaths.forEach((val, index) => {
								let valSize = res.tempFiles[index].size / 1024 / 1024
								if (valSize.toFixed(2) <= Number(that.max)) {
									that.upload(val)
								} else that.$tools.showtt(`不可选择超过${that.max}M的图片，请重新选择`)
							})
						} else {
							res.tempFilePaths.forEach((val, index) => {
								that.upload(val)
							})
						}

					}
				})
			},
			upload(pathfile) { //上传文件 1=上传图片 2=上传视频
				let that = this
				const token = uni.getStorageSync('token')
				uni.showLoading({
					title: '加载中'
				})
				uni.uploadFile({
					url: that.$tools.upload,
					header: {token},
					filePath: pathfile,
					name: 'file',
					success: (res) => {
						res = JSON.parse(res.data)
						if (res.code === 1) {
							if (that.type === 1) { //单图
								that.onImage = pathfile
								that.saveImage = res.data.url
							} else { //多图
								that.onImages.push(pathfile)
								that.saveImages.push(res.data.url)
							}
						}
					},
					complete: () => {
						uni.hideLoading()
					},
					fail: (err) => {
						this.$tools.showtt('上传失败，请重试')
					}
				})
			},
		}
	}
</script>

<style>

</style>
